<!DOCTYPE html>
<html>
    <head>
        <title>Ouch,keep alive</title>
        <link rel ="icon" type ="image/x-icon" href="./assets/snake1head.png">
        <link rel="stylesheet" type="text/css" href="css/jquery.my-modal.1.1.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <meta charset="UTF-8">
        <!-- the following says there are javascript source code contained in 
             the external source files
        -->
        <!-- external library -->
        <script type="text/javascript" src="src/lib/gl-matrix.js"></script>

        <!-- Engine code -->
        <!-- Core of Engine --> 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Engine_Core.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Engine_VertexBuffer.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Engine_GameLoop.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Engine_Input.js"></script>
        <!-- Resource support -->

        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_ResourceMap.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_TextFileLoader.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_DefaultResources.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_AudioClips.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_Textures.js"></script>
        <script type="text/javascript" src="src/Engine/Core/Resources/Engine_Fonts.js"></script>
        <script type="text/javascript" src="src/Engine/Transform.js"></script>
        <script type="text/javascript" src="src/Engine/Camera.js"></script>
        <script type="text/javascript" src="src/Engine/Scene.js"></script>
        <!-- Renderables -->
        <script type="text/javascript" src="src/Engine/Renderables/Renderable.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/TextureRenderable.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/SpriteRenderable.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/SpriteAnimateRenderable.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/FontRenderable.js"></script>
        <script type="text/javascript" src="src/Engine/Energy.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/NewSnake.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/SnakeGroup.js"></script>
        <script type="text/javascript" src="src/Engine/Renderables/ProcessBar.js"></script>
        <script type="text/javascript" src="src/Engine/Fruits.js"></script>
        <!-- Shaders -->
        <script type="text/javascript" src="src/Engine/Shaders/SimpleShader.js"></script>
        <script type="text/javascript" src="src/Engine/Shaders/TextureShader.js"></script>
        <script type="text/javascript" src="src/Engine/Shaders/SpriteShader.js"></script>

        <!-- Client game code -->
        <script type="text/javascript" src="src/Engine/LeftView.js"></script>
        <script type="text/javascript" src="src/Engine/RightView.js"></script>
        <script type="text/javascript" src="src/Engine/MiniView.js"></script>
        <script type="text/javascript" src="src/MyGame/MyGame.js"></script>
        <script type="text/javascript" src="src/MyGame/start.js"></script>
        <script type="text/javascript" src="src/MyGame/Reborn.js"></script>
        <script type="text/javascript" src="src/MyGame/Tips.js"></script>
        <script type="text/javascript" src="src/MyGame/GameOver.js"></script>
        <script type="text/javascript" src="src/MyGame/Credit.js"></script>
        <script type="text/javascript" src="./js/jquery1.9.min.js"></script>
        <script type="text/javascript" src="./js/jquery.my-modal.1.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                function getData() {
                    $.getJSON("http://115.159.6.187/ranklist.php?callback=?", function (data) {
                        var records = data;
                        console.log(records);
                        records.sort(function (a, b) {
                            return a.score - b.score
                        });

                        var length = records.length;
                        console.log(records);
                        for (var i = length; i > length - 3; i--) {
                            $('#rankList').append("<tr><td>" + records[i - 1].name + "</td><td>" + records[i - 1].score + "</td></tr>");
                        }

                    });
                }
                getData();

            });


        </script>
    </head>

    <body onload="
            var myGame = new start();
            gEngine.Core.initializeEngineCore('GLCanvas', myGame);
          " style="background-image: url(./assets/background.png);font-family:Microsoft YaHei;">

        <div>
            <img src="./assets/groupone.png" style="width:500px;height:50px;">
            <img src="./assets/name.png" style="float:right;width:550px;height:35px;padding-top: 5px;">
        </div>
        <div align="center">
            <img src="./assets/title.png" style="width:600px;">
        </div>
        <div>
            <img src="./assets/left.png" style="width:200px;float: left;">
            <img src="./assets/right.png" style="width:200px;float: right;margin-bottom: 5px;">
        </div>
        <div id="leftScore" style="border-color: #c42533;float: left;border-style: solid;clear: both;">
            <h2>Player 1's score:</h2>
            <p id="one" style="">0</p>
            <h2>Player 1's life:</h2>
            <!--<p id="oneLife">3</p>-->
            <img src="./assets/heart.png" id="one1" style="display:inline-block;">
            <img src="./assets/heart.png" id="one2" style="display:inline-block;">
            <img src="./assets/heart.png" id="one3" style="display:inline-block;">
        </div>
        <div id="rightScore" style="border-color: #019fe8;float: right;border-style: solid;">
            <h2>Player 2's score:</h2>
            <p id="two">0</p>
            <h2>Player 2's life:</h2>
            <img src="./assets/heart.png" id="two1" style="display:inline-block;">
            <img src="./assets/heart.png" id="two2" style="display:inline-block;">
            <img src="./assets/heart.png" id="two3" style="display:inline-block;">
            <!--<p id="twoLife">3</p>-->
        </div>
        <div align="center" style="">
            <canvas id="GLCanvas" width="860" height="480">
                <!-- GLCanvas is the area we will draw in: a 640x480 area. -->
                Your browser does not support the HTML5 canvas.
                <!-- this message will show only if WebGL clearing failed -->
            </canvas>
        </div>

        <img src="./assets/bottomleft.png"  style="position:absolute;bottom:0px;left:90px;">
        <img src="./assets/bottom.png" style="position:absolute;bottom:0px;left:76%;width: 400px;margin-left: -200px;">
        <img src="./assets/bottomright1.png" style="position:absolute;bottom:0px;right: 190px;">
        <img src="./assets/bottomright2.png" style="position:absolute;bottom:0px;right:30px;">
        <div style="position:absolute;height:150px;bottom:5px;left:35%;width: 400px;margin-left: -80px;border-color: #c42533;border-style: solid;font-size:18px;">
            <table id="rankList" class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Score</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                </tbody>
            </table>

        </div>

        <!--弹出框-->
        <div style="position:absolute;bottom:5px;left:60%;width: 250px;height: 150px;margin-left: -50px;font-size: 24px;border-color: #019fe8;float: right;border-style: solid">
            <p align="center">When you finished the game,click here!</p>
            <div align="center">
                <button class="btn1"  style="
                        height:40px;
                        letter-spacing: 4px;
                        padding-left: 12px;
                        border-radius: 5px;
                        background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);
                        background: -moz-linear-gradient(top, #66B5E6, #2e88c0);
                        background: linear-gradient(top, #66B5E6, #2e88c0);
                        background: -ms-linear-gradient(top, #66B5E6, #2e88c0);
                        border: 1px solid #2576A8;
                        box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;
                        color: #fff;
                        text-shadow: 1px 1px 0.5px #22629B;">I want in!</button>
            </div>

        </div>
        <div class="m-modal">
            <div class="m-modal-dialog">
                <div class="m-top">
                    <h4 class="m-modal-title">
                        Please enter your name
                    </h4>
                    <span class="m-modal-close">&times;</span>
                </div>
                <div class="m-middle">
                    <!--content-->
                    
                    <form action="http://115.159.6.187/rankadd.php" method="get">
                        <strong>Player one's name:<font color="#ff0000">*</font></strong>
                        <div><input type="text" name="name1"  required="required"/></div>
                        <strong>Player two's name:<font color="#ff0000">*</font></strong>
                        <div><input type="text" name="name2" required="required" /></div>
                        <input type="hidden" id="onescore" name="onescore" value="">
                        <input type="hidden" id="twoscore" name="twoscore" value="">


                        <div class="m-bottom">
                            <button type="submit" id="submit"> Upload </button>
                        </div>
                    </form>
                </div>
            </div>

            <script>
                var m1 = new MyModal.modal(function () {
                    //                alert("你点击了确定");//点击确定后的回调函数
                });
                $('.btn1').on("click", function () {
                    m1.show();//显示
                    /*隐藏的方法*/
                    //m1.hide()
                });
                $(document).ready(function () {
                    $(".btn1").mousedown(function () {
                        $("#onescore").val($("#one").html());
                        $("#twoscore").val($("#two").html());
                        console.log($("#one").html());
                    });
                })

            </script>
    </body>
</html>